  <template>
  <div class="p-6 max-w-6xl mx-auto space-y-8 text-white">
    <!-- 顶部标题行 -->
    <div class="flex items-center justify-between mb-8">
      <button @click="$router.go(-1)"
        class="flex items-center px-4 py-2 bg-electric-500 text-black rounded-md hover:bg-electric-400 transition">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
        </svg>
        返回
      </button>
      <h1 class="text-3xl font-bold text-electric-500 flex-1 text-center">政策对比</h1>
      <div class="w-24"></div> <!-- 保持左右对称的空div -->
    </div>

    <div class="grid grid-cols-2 gap-6">
      <!-- 旧政策 -->
      <div class="bg-white/5 p-4 rounded-lg shadow-md border border-white/10">
        <div class="text-sm text-white/80 space-y-1">
          <p><span class="text-electric-500">标题：</span>{{ oldPolicy.title }}</p>
          <p><span class="text-electric-500">发文编号：</span>{{ oldPolicy.symbol }}</p>
          <p><span class="text-electric-500">发布部门：</span>{{ oldPolicy.department }}</p>
          <p><span class="text-electric-500">发布时间：</span>{{ oldPolicy.publish_date }}</p>
          <p><span class="text-electric-500">生效时间：</span>{{ oldPolicy.start_time }}</p>
          <p v-if="oldPolicy.end_time"><span class="text-electric-500">失效时间：</span>{{ oldPolicy.end_time }}</p>
          <p><span class="text-electric-500">类型：</span>{{ oldPolicy.type }}</p>
          <p><span class="text-electric-500">地区：</span>{{ oldPolicy.address_2 || oldPolicy.address_1 }}</p>
        </div>
        <div class="mt-4">
          <h3 class="text-lg font-bold text-white/90 mb-1">政策原文</h3>
          <div class="space-y-2 text-white/90">
            <div v-for="(html, index) in oldDiffs" :key="'old-' + index"
              class="whitespace-pre-wrap rounded p-2 bg-black/10" v-html="html"></div>
          </div>
        </div>
      </div>

      <!-- 新政策 -->
      <div class="bg-white/5 p-4 rounded-lg shadow-md border border-white/10">
        <div class="text-sm text-white/80 space-y-1">
          <p><span class="text-electric-500">标题：</span>{{ newPolicy.title }}</p>
          <p><span class="text-electric-500">发文编号：</span>{{ newPolicy.symbol }}</p>
          <p><span class="text-electric-500">发布部门：</span>{{ newPolicy.department }}</p>
          <p><span class="text-electric-500">发布时间：</span>{{ newPolicy.publish_date }}</p>
          <p><span class="text-electric-500">生效时间：</span>{{ newPolicy.start_time }}</p>
          <p v-if="newPolicy.end_time"><span class="text-electric-500">失效时间：</span>{{ newPolicy.end_time }}</p>
          <p><span class="text-electric-500">类型：</span>{{ newPolicy.type }}</p>
          <p><span class="text-electric-500">地区：</span>{{ newPolicy.address_2 || newPolicy.address_1 }}</p>
        </div>

        <!-- 新政策 -->
        <div class="bg-white/5 p-4 rounded-lg shadow-md border border-white/10">
          <div class="text-sm  space-y-1">
            <p><span class="text-electric-500">标题：</span>{{ newPolicy.title }}</p>
            <p><span class="text-electric-500">发文编号：</span>{{ newPolicy.symbol }}</p>
            <p><span class="text-electric-500">发布部门：</span>{{ newPolicy.department }}</p>
            <p><span class="text-electric-500">发布时间：</span>{{ newPolicy.publish_date }}</p>
            <p><span class="text-electric-500">生效时间：</span>{{ newPolicy.start_time }}</p>
            <p v-if="newPolicy.end_time"><span class="text-electric-500">失效时间：</span>{{ newPolicy.end_time }}</p>
            <p><span class="text-electric-500">类型：</span>{{ newPolicy.type }}</p>
            <p><span class="text-electric-500">地区：</span>{{ newPolicy.address_2 || newPolicy.address_1 }}</p>
          </div>
          <div class="mt-4">
            <h3 class="text-lg font-bold  mb-1">政策原文</h3>
            <div class="space-y-2 ">
              <div v-for="(html, index) in newDiffs" :key="'new-' + index"
                class="whitespace-pre-wrap rounded p-2 bg-black/10" v-html="html"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { diff_match_patch } from 'diff-match-patch'
import themeService from '../services/themeService.js'

export default {
  name: 'PolicyDiff',
  data() {
    return {
      oldPolicy: {},
      newPolicy: {},
      oldDiffs: [],
      newDiffs: [],
      loading: true,
      error: null
    }
  },
  async created() {
    const oldId = this.$route.query.oldId
    const newId = this.$route.query.newId
    this.loading = true
    this.error = null
    try {
      // 并发请求两个政策详情
      const [oldRes, newRes] = await Promise.all([
        axios.get(`/api/policy/${oldId}`),
        axios.get(`/api/policy/${newId}`)
      ])
      this.oldPolicy = oldRes.data || {}
      this.newPolicy = newRes.data || {}
      const oldParas = this.oldPolicy.context?.split(/\n+/).filter(Boolean) || []
      const newParas = this.newPolicy.context?.split(/\n+/).filter(Boolean) || []
      this.generateDiffs(oldParas, newParas)
    } catch (e) {
      this.error = '获取政策详情失败：' + (e.message || e)
    } finally {
      this.loading = false
    }
  },
  methods: {
    generateDiffs(oldParas, newParas) {
      const dmp = new diff_match_patch()
      const maxLength = Math.max(oldParas.length, newParas.length)
      const oldResult = []
      const newResult = []

      for (let i = 0; i < maxLength; i++) {
        const oldText = oldParas[i] || ''
        const newText = newParas[i] || ''
        const diffs = dmp.diff_main(oldText, newText)
        dmp.diff_cleanupSemantic(diffs)

        const oldHtml = diffs.map(([op, text]) => {
          if (op === -1) return `<del class="text-red-400 bg-red-800/30">${text}</del>`
          if (op === 0) return `<span>${text}</span>`
          return ''
        }).join('')

        const newHtml = diffs.map(([op, text]) => {
          if (op === 1) return `<ins class="text-green-400 bg-green-800/30">${text}</ins>`
          if (op === 0) return `<span>${text}</span>`
          return ''
        }).join('')

        oldResult.push(oldHtml)
        newResult.push(newHtml)
      }

      this.oldDiffs = oldResult
      this.newDiffs = newResult
    }
  }
}
</script>

<style scoped>
:deep() {
  user-select: text;
  -webkit-user-select: text;
  caret-color: transparent;
  cursor: default;
}

:deep(button) {
  cursor: pointer;
}

:deep(.policy-content) {
  ::selection {
    color: inherit;
  }
}

.my-element {
  background-color: var(--color-primary);
  color: var(--color-textPrimary);
  border: 1px solid var(--color-border);
}

.text-electric-500 {
  color: var(--color-accent);
}

.text-electric-400 {
  color: var(--color-accent);
}

.bg-electric-500 {
  background-color: var(--color-accent);
}

.bg-electric-400 {
  background-color: var(--color-accent);
}

del {
  background-color: var(--color-error);
  opacity: 0.2;
}

ins {
  background-color: var(--color-success);
  opacity: 0.2;
}
</style>
